<template>
       <div class="listen">
         <!-- 登录 -->
            <login class="login"></login>
         <!-- 顶部 -->
            <div class="top">
                <i class="iconfont icon-caidan" @click="login"></i>
                <h2>随心听</h2>
            </div>
            <!-- 主体 -->
            <div class="commot">
                <div class="topTwo">
                  <p class="easy">轻松一点，好音乐随心听</p>
                </div>
                <div class="videoTwo">
                  <videoOne></videoOne>
                </div>
                <div class="timeRecom">
                  <timeRecom class="timeRecom"></timeRecom>
                </div> 
            </div>
          <!-- 底部 -->
          <div class="footer">
                <ul>
                  <li>
                    <div class="liBox" @click="Find">
                      <p><i class="iconfont icon-changpian"></i></p>
                      <p>发现</p>
                    </div>
                    
                  </li>
                  <li>
                    <div class="liBox blue">
                      <p><i class="iconfont icon-yinle"></i></p>
                      <p>随心听</p>
                    </div>
                    
                  </li>
                  <li >
                    <div class="liBox " @click="Video_B">
                      <p class="impo"><i class="iconfont icon-shipin"></i></p>
                      <p class="impo">视频</p>
                    </div>
                  </li>
                  <li>
                    <div class="liBox"  @click="mymusic">
                      <p><i class="iconfont icon-yinleyinfujiezou"></i></p>
                      <p>我的音乐</p>
                    </div>
                  </li>
                </ul>
            </div>
       </div>
</template>

<script>
import videoOne from "../components/videoOne";
import timeRecom from "../components/timeRecom";
import login from "../components/login";
export default {
  name: "listen",
  data() {
    return {
      song_id: ""
    };
  },
  components: {
    videoOne,
    timeRecom,
    login
  },
  methods: {
    login() {
      document.querySelector(".login").style.transform = "translateX(0)";
      document.querySelector(".loginBox").style.opacity = "1";
    },
    // 路由发现
    Find() {
      this.$router.push({ name: "Find" });
    },
    // 路由视频
    Video_B() {
      this.$router.push({ name: "Video_B" });
    },
    // 路由我的音乐
    mymusic() {
      this.$router.push("/mymusic");
    }
  }
};
</script>
<style lang='scss' scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.listen {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #21c5bd;
  .login {
    transform: translateX(-100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .top {
    height: 8%;
    background: #22c5bd;
    color: #fff;
    position: relative;
    i {
      position: absolute;
      left: 0.35rem;
      top: 0.4rem;
      font-size: 0.8rem;
    }
    h2 {
      font-size: 0.5rem;
      text-align: center;
      font-weight: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  // 主体
  .commot {
    width: 100%;
    height: 82%;
    overflow: auto;
    padding-bottom:1.5rem ;
    box-sizing: border-box;
    .topTwo {
      width: 100%;
      padding: 0.7rem 0;
      .easy {
        font-size: 0.5rem;
        color: #fff;
        text-align: center;
      }
    }
    .videoTwo {
      width: 100%;
      padding: 0 0.35rem;
      box-sizing: border-box;
      margin: 0 auto;
    }
    .timeRecom {
      width: 100%;
      padding: 0.2rem 0.35rem;
      box-sizing: border-box;
      margin: 0 auto;
      background: #fff;
      margin-top: 0.35rem;
    }
  }

  // 底部
  .footer {
    width: 100%;
    height: 10%;
    background: #fff;

    ul {
      width: 100%;
      height: 100%;

      li {
        display: inline-block;
        width: 25%;
        height: 100%;
        position: relative;
        .liBox {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;

          p {
            text-align: center;
            font-size: 0.25rem;
            color: #999999;
            margin-top: 0.2rem;
          }
          i {
            font-size: 0.55rem;
          }
        }
        .blue{
          p{
            color: #21c5bd;
          }
        }
        
      }
    }
  }
}
</style>